<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket</title>
    <script src="../static/jquery-1.11.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
<h3>hello socket</h3>
token:<input type="text" id="token" value="123"/><br/>
name:<input type="text" id="name"/><br/>
age:<input type="text" id="age"/><br/>
<button onclick="submitInfo()">提交</button><br/>
<span id="status">消息提交状态</span>
</body>
<script>
     var socket;
    window.onload = function(){
        openSocket();
    }
    function submitInfo(){
         
                var sendData = {
                    "name":document.getElementById("name").value,
                    "age":document.getElementById("age").value
                };     
                $.ajax({ 
                    type:"post",
                    url:"http://127.0.0.1:7011/test-stream", 
                    dataType:"json",      
                    contentType:"application/json",               
                    data:JSON.stringify(sendData), 
                    beforeSend: function (XMLHttpRequest) {
                        XMLHttpRequest.setRequestHeader("token", document.getElementById("token").value);
                    },
                    success:function(result){ 
                        if(result){
                            $("#status").text("正在处理");
                        }else{
                             $("#status").text("提交失败");
                        }                       
                    } 
                 }); 
    }

    function openSocket() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else{
            console.log("您的浏览器支持WebSocket");
            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            var token = document.getElementById('token').value;
            // var socketUrl="ws://127.0.0.1:22599/webSocket/"+userId;
            var socketUrl="ws://127.0.0.1:7021/receiptMsg/"+token;
            console.log(socketUrl);
            if(socket!=null){
                socket.close();
                socket=null;
            }
            socket = new WebSocket(socketUrl);
            //打开事件
            socket.onopen = function() {
                console.log("websocket已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function(msg) {
              /*  var serverMsg = "收到服务端信息：" + msg.data;
                console.log(serverMsg); */
                //发现消息进入    开始处理前端触发逻辑
                console.log(msg.data);
                if(msg.data == "true"){
                     $("#status").text("处理成功");
                }else{
                     $("#status").text("处理失败");
                }
            };
            //关闭事件
            socket.onclose = function() {
                console.log("websocket已关闭");
            };
            //发生了错误事件
            socket.onerror = function() {
                console.log("websocket发生了错误");
            }
        }
    }
    function sendMessage() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else {
            // console.log("您的浏览器支持WebSocket");
            var toUserId = document.getElementById('toUserId').value;
            var contentText = document.getElementById('contentText').value;
            var msg = '{"toUserId":"'+toUserId+'","contentText":"'+contentText+'"}';
            console.log(msg);
            socket.send(msg);
        }
    }

    </script>
</html>